<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>路由的基本使用</title>
    <script src="libs/js/vue.js"></script>
    <!-- 1. 安装 vue-router 路由模块 -->
    <script src="libs/js/vue-router.js"></script>
    <style>
        .myActive {
            color:red;
            font-weight: bold;
            font-size: 38px;
        }

        .v-enter, .v-leave-to {
            opacity: 0;
            transform: translateX(22px);
        }
        .v-enter-active, .v-leave-active {
            transition: all .6s ease;

        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 注意，这里的 href 需要挂上 # 号，表示对应的是 路由，然后才能进行路由匹配 不建议使用，键是使用router-link-->
        <!-- <a href="#/login">登录</a>
        <a href="#/register">注册</a> -->

        <!-- 默认渲染为A标签 ，加上tag 后，任然保持有一个触发的事件-->
        <router-link to="/login" tag="span">登录</router-link>
        <router-link to="register">注册</router-link><!-- 这里to加不加/都可以 -->

        <!-- vue-router 提供的元素，专门用来作为占位符，将来路由规则匹配到的组件会展示到这个
            router-view 中去。 故是个占位符
        -->

        <transition mode="out-in">
            <router-view></router-view>
        </transition>
    </div>

    <script>

        
        

        // 创建组件的模板对象
        var login = {
            template: "<h1>登录组件</h1>"
        }
        var register = {
            template: "<h1>注册组件</h1>"
        }

        // Vue.component("login",{  //不能使用这个，这个的login名称只能使用作为html标签使用
        //     template: "<h1>登录组件</h1>"
        // })
       

        // 2.  创建一个路由对象，当导入 vue-router 后，在 window 全局对象中，就有了一个 路由的构造函数，叫做 VueRouter
        // 在 new 路由对象的时候，可以为 构造函数，传递一个配置对象
        var routerObj = new VueRouter({
            // route  这个配置对象中的 route 表示路由匹配规则的意思
            routes: [   //路由匹配规则
                // 每个路由规则都是一个对象，这个对象身上有两个必须的属性
                // 属性1： path， 表示监听哪个路由地址；
                // 属性2： component， 表示如果 路由是前面匹配到的 path， 则展示 component 属性对应的组件
                // 注意： component 属性值， 必须是一个组件模板对象， 不能是组件的引用名称
                // {path: "/", component: login},
                {path: "/", redirect: "/login"},  // 同 Node.js 中的不同，Node基于服务器端的转发，这里是重定位到对应的URL地址
                {path: "/login", component: login },
                {path: "/register", component: register }
            ],
            linkActiveClass: "myActive"     // 可修改默认激活类，进行样式设置
        })


        var app = new Vue({
            el: "#app",
            data: {},
            methods: {},
            components: {},
            router: routerObj   // 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应网页
        })
    </script>
</body>
</html>